<template>
  <div class="supplier-reconciliation">
    <div class="page-header">
      <h1>供应商对账单</h1>
      <div class="breadcrumb">财务管理 / 供应商对账单</div>
    </div>

    <div class="search-action-section">
      <div class="search-form">
        <div class="form-item">
          <label>供应商</label>
          <select v-model="searchForm.supplierId">
            <option value="">请选择供应商</option>
            <option v-for="supplier in supplierList" :key="supplier.id" :value="supplier.id">
              {{ supplier.supplierName }}
            </option>
          </select>
        </div>
        <div class="form-item">
          <label>对账期间</label>
          <input v-model="searchForm.startDate" type="date" placeholder="开始日期" />
        </div>
        <div class="form-item">
          <label>至</label>
          <input v-model="searchForm.endDate" type="date" placeholder="结束日期" />
        </div>
      </div>
      <div class="action-buttons">
        <button class="btn btn-primary" @click="generateReconciliation">
          <span class="btn-icon">📊</span>
          生成对账单
        </button>
        <button class="btn btn-success" @click="confirmExportReconciliation" :disabled="!reconciliationData">
          <span class="btn-icon">📊</span>
          导出选中数据
        </button>
        <button class="btn btn-info export-all-btn" @click="confirmExportAllData">
          <span class="btn-icon">📥</span>
          导出全部数据
        </button>
      </div>
    </div>

    <div v-if="reconciliationData" class="reconciliation-content">
      <div class="reconciliation-header">
        <h2>{{ reconciliationData.supplierName }} - 对账单</h2>
        <div class="reconciliation-info">
          <p>对账期间：{{ reconciliationData.startDate }} 至 {{ reconciliationData.endDate }}</p>
          <p>生成时间：{{ reconciliationData.generateTime }}</p>
        </div>
      </div>

      <div class="summary-section">
        <div class="summary-item">
          <span class="label">采购总额：</span>
          <span class="value">¥{{ reconciliationData.totalPurchase }}</span>
        </div>
        <div class="summary-item">
          <span class="label">付款总额：</span>
          <span class="value">¥{{ reconciliationData.totalPayment }}</span>
        </div>
        <div class="summary-item">
          <span class="label">余额：</span>
          <span class="value" :class="{ negative: reconciliationData.balance < 0 }">
            ¥{{ reconciliationData.balance }}
          </span>
        </div>
      </div>

      <div class="detail-section">
        <h3>明细清单</h3>
        
        <!-- 批量操作区域 -->
        <div class="batch-actions">
          <label class="checkbox-label">
            <input type="checkbox" @change="toggleSelectAll" :checked="isAllSelected" />
            <span>全选</span>
          </label>
          <span class="selected-count" v-if="selectedDetails.length > 0">
            已选择 {{ selectedDetails.length }} 条数据
          </span>
        </div>
        
        <div class="table-section">
          <table class="detail-table">
            <thead>
              <tr>
                <th width="50">选择</th>
                <th>日期</th>
                <th>单据类型</th>
                <th>单据编号</th>
                <th>摘要</th>
                <th>借方</th>
                <th>贷方</th>
                <th>余额</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="item in reconciliationData.details" :key="item.id" :class="{ 'selected-row': item.selected }" @click="toggleRowSelect(item, $event)">
                <td>
                  <input type="checkbox" v-model="item.selected" @change="updateSelection" @click.stop />
                </td>
                <td>{{ item.date }}</td>
                <td>{{ item.type }}</td>
                <td>{{ item.number }}</td>
                <td>{{ item.description }}</td>
                <td class="amount-cell debit-cell">
                  {{ item.debit ? `¥${parseFloat(item.debit).toLocaleString()}` : '-' }}
                </td>
                <td class="amount-cell credit-cell">
                  {{ item.credit ? `¥${parseFloat(item.credit).toLocaleString()}` : '-' }}
                </td>
                <td class="balance-cell" :class="{ negative: parseFloat(item.balance) < 0 }">
                  ¥{{ item.balance }}
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>

    <div v-else class="empty-state">
      <div class="empty-icon">📊</div>
      <h3>暂无对账单</h3>
      <p>请选择供应商和对账期间，然后点击"生成对账单"</p>
    </div>

    <!-- 导出确认对话框 -->
    <div v-if="showExportModal" class="modal-overlay" @click="closeExportModal">
      <div class="modal-content export-modal" @click.stop>
        <div class="modal-header">
          <h3>{{ exportModalTitle }}</h3>
          <button class="modal-close" @click="closeExportModal">&times;</button>
        </div>
        <div class="modal-body">
          <p>{{ exportModalMessage }}</p>
          
          <!-- 列选择区域 -->
          <div class="column-selection">
            <p><strong>选择要导出的列：</strong></p>
            <div class="column-grid">
              <label class="column-checkbox" v-for="column in availableColumns" :key="column.key">
                <input type="checkbox" v-model="column.selected" />
                <span>{{ column.label }}</span>
              </label>
            </div>
          </div>
          
          <div class="export-info">
            <p><strong>导出内容预览：</strong></p>
            <ul>
              <li v-for="column in selectedColumns" :key="column.key">{{ column.label }}</li>
            </ul>
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn btn-secondary" @click="closeExportModal">取消</button>
          <button class="btn btn-primary" @click="confirmExport">确认导出</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { apiGet, apiPost } from '../../utils/api.js'
import * as XLSX from 'xlsx'

const searchForm = reactive({
  supplierId: '',
  startDate: '',
  endDate: ''
})

const reconciliationData = ref(null)
const supplierList = ref([])

// 导出确认模态框状态
const showExportModal = ref(false)
const exportModalTitle = ref('')
const exportModalMessage = ref('')
const exportAction = ref(null)

// 可选择的列配置
const availableColumns = ref([
  { key: 'supplierName', label: '供应商名称', selected: true },
  { key: 'period', label: '对账期间', selected: true },
  { key: 'totalPurchase', label: '采购总额', selected: true },
  { key: 'totalPayment', label: '付款总额', selected: true },
  { key: 'balance', label: '余额', selected: true },
  { key: 'generateTime', label: '生成时间', selected: true },
  { key: 'details', label: '明细清单', selected: true }
])

// 计算选中的列
const selectedColumns = computed(() => {
  return availableColumns.value.filter(column => column.selected)
})

// 明细数据选择相关
const selectedDetails = computed(() => {
  if (!reconciliationData.value?.details) return []
  return reconciliationData.value.details.filter(item => item.selected)
})

const isAllSelected = computed(() => {
  if (!reconciliationData.value?.details || reconciliationData.value.details.length === 0) return false
  return reconciliationData.value.details.every(item => item.selected)
})

// 获取供应商列表
const loadSupplierList = async () => {
  try {
    const response = await apiGet('/finance/suppliers')
          if (response && Array.isArray(response)) {
        supplierList.value = response
    } else {
      console.error('获取供应商列表失败:', response)
      supplierList.value = []
    }
  } catch (error) {
    console.error('获取供应商列表失败:', error)
    supplierList.value = []
  }
}

const generateReconciliation = async () => {
  if (!searchForm.supplierId || !searchForm.startDate || !searchForm.endDate) {
    alert('请选择供应商和对账期间')
    return
  }
  
  // 验证日期范围
  if (new Date(searchForm.startDate) > new Date(searchForm.endDate)) {
    alert('开始日期不能晚于结束日期')
    return
  }
  
  // 验证选择的供应商是否存在
  const selectedSupplier = supplierList.value.find(s => s.id == searchForm.supplierId)
  if (!selectedSupplier) {
    alert('选择的供应商不存在，请重新选择')
    return
  }
  


      try {
        const params = new URLSearchParams({
          supplierId: searchForm.supplierId,
          startDate: searchForm.startDate,
          endDate: searchForm.endDate
        })
        const data = await apiGet(`/finance/reconciliation/supplier?${params}`)

        
        if (data) {
          // 检查是否有错误信息
          if (data.error) {
            // 显示错误提醒
            alert(`生成对账单失败: ${data.error}`)
            reconciliationData.value = null
            return
          }
          
          // 为每个明细项添加选择状态和计算余额
          let runningBalance = 0
          const detailsWithSelection = data.transactions?.map(item => {
            // 计算余额：借方增加余额，贷方减少余额
            const debitAmount = parseFloat(item.debit) || 0
            const creditAmount = parseFloat(item.credit) || 0
            
            // 如果是第一笔交易，余额就是借方金额
            if (runningBalance === 0 && debitAmount > 0) {
              runningBalance = debitAmount
            } else {
              runningBalance += debitAmount - creditAmount
            }
            
            return {
              id: item.reference,
              date: item.date,
              type: item.type || '交易',
              number: item.reference,
              description: item.description,
              debit: item.debit || '',
              credit: item.credit || '',
              balance: runningBalance.toFixed(2),
              selected: false
            }
          }) || []
          
          // 根据选择的供应商ID获取供应商名称
          const selectedSupplier = supplierList.value.find(s => s.id == searchForm.supplierId)
          const supplierName = selectedSupplier ? selectedSupplier.supplierName : '未知供应商'
          
          reconciliationData.value = {
            supplierName: supplierName,
            startDate: searchForm.startDate,
            endDate: searchForm.endDate,
            generateTime: new Date().toLocaleString(),
            totalPurchase: data.totalPurchases?.toLocaleString() || '0.00',
            totalPayment: data.totalPayments?.toLocaleString() || '0.00',
            balance: data.balance?.toLocaleString() || '0.00',
            details: detailsWithSelection
          }

        } else {
          console.error('生成对账单失败')
          reconciliationData.value = null
        }
      } catch (error) {
        console.error('生成对账单时出错:', error)
        // 显示错误提醒
        alert(`生成对账单时出错: ${error.message || '未知错误'}`)
        reconciliationData.value = null
      }
}

// 选择相关函数
const toggleSelectAll = () => {
  if (!reconciliationData.value?.details) return
  
  const newState = !isAllSelected.value
  reconciliationData.value.details.forEach(item => {
    item.selected = newState
  })
}

const updateSelection = () => {
  // 当选择状态改变时，更新计算属性
  // 这里不需要额外逻辑，Vue会自动更新
}

const toggleRowSelect = (item, event) => {
  const target = event?.target
  if (!target) {
    item.selected = !item.selected
    updateSelection()
    return
  }
  const tag = target.tagName?.toLowerCase()
  if (tag === 'input' || tag === 'button' || tag === 'a') return
  if (target.closest && target.closest('button')) return
  item.selected = !item.selected
  updateSelection()
}

const confirmExportReconciliation = () => {
  if (!reconciliationData.value) {
    alert('请先生成对账单')
    return
  }
  
  if (selectedDetails.value.length === 0) {
    alert('请选择要导出的明细数据')
    return
  }
  
  exportModalTitle.value = '导出对账单明细'
  exportModalMessage.value = `确定要导出选中的${selectedDetails.value.length}条明细数据吗？`
  exportAction.value = () => exportToExcel(reconciliationData.value, '供应商对账单')
  showExportModal.value = true
}

const confirmExportAllData = () => {
  exportModalTitle.value = '导出全部数据'
  exportModalMessage.value = '确定要导出所有对账单数据吗？'
  exportAction.value = () => exportToExcel(reconciliationData.value, '供应商对账单-全部数据')
  showExportModal.value = true
}

const closeExportModal = () => {
  showExportModal.value = false
  exportModalTitle.value = ''
  exportModalMessage.value = ''
  exportAction.value = null
}

const confirmExport = () => {
  if (exportAction.value) {
    exportAction.value()
    closeExportModal()
  }
}

const exportToExcel = (data, filename) => {
  try {
    // 检查是否有选中的列
    if (selectedColumns.value.length === 0) {
      alert('请至少选择一列进行导出')
      return
    }
    
    const rows = []
    
    // 添加对账单基本信息（根据选中的列）
    const basicInfo = []
    selectedColumns.value.forEach(column => {
      switch (column.key) {
        case 'supplierName':
          basicInfo.push(data.supplierName || '')
          break
        case 'period':
          basicInfo.push(`${data.startDate} 至 ${data.endDate}`)
          break
        case 'totalPurchase':
          basicInfo.push(data.totalPurchase || '')
          break
        case 'totalPayment':
          basicInfo.push(data.totalPayment || '')
          break
        case 'balance':
          basicInfo.push(data.balance || '')
          break
        case 'generateTime':
          basicInfo.push(data.generateTime || '')
          break
        default:
          basicInfo.push('')
      }
    })
    
    if (basicInfo.some(info => info !== '')) {
      rows.push(selectedColumns.value.map(col => col.label))
      rows.push(basicInfo)
    }
    
    // 添加明细清单（如果选中了明细清单列）
    if (selectedColumns.value.some(col => col.key === 'details') && data.details && data.details.length > 0) {
      rows.push([]) // 空行分隔
      rows.push(['明细清单'])
      rows.push(['日期', '单据类型', '单据编号', '摘要', '借方', '贷方', '余额'])
      
      // 只导出选中的明细数据
      const selectedDetails = data.details.filter(item => item.selected)
      selectedDetails.forEach(item => {
        rows.push([
          item.date || '',
          item.type || '',
          item.number || '',
          item.description || '',
          item.debit || '',
          item.credit || '',
          item.balance || ''
        ])
      })
    }
    
    // 创建工作簿
    const workbook = XLSX.utils.book_new()
    
    // 创建工作表
    const worksheet = XLSX.utils.aoa_to_sheet(rows)
    
    // 设置列宽
    const columnWidths = selectedColumns.value.map(column => {
      switch (column.key) {
        case 'supplierName':
        case 'period':
        case 'generateTime':
          return { wch: 20 }
        case 'totalPurchase':
        case 'totalPayment':
        case 'balance':
          return { wch: 15 }
        default:
          return { wch: 12 }
      }
    })
    worksheet['!cols'] = columnWidths
    
    // 添加工作表到工作簿
    XLSX.utils.book_append_sheet(workbook, worksheet, '供应商对账单')
    
    // 导出文件
    XLSX.writeFile(workbook, `${filename}_${new Date().toISOString().split('T')[0]}.xlsx`)
    
    alert('导出成功！')
  } catch (error) {
    console.error('导出失败:', error)
    alert('导出失败: ' + error.message)
  }
}

// 页面加载时初始化
onMounted(async () => {
  // 设置默认日期为当前月份
  const now = new Date()
  const firstDay = new Date(now.getFullYear(), now.getMonth(), 1)
  const lastDay = new Date(now.getFullYear(), now.getMonth() + 1, 0)
  
  searchForm.startDate = firstDay.toISOString().split('T')[0]
  searchForm.endDate = lastDay.toISOString().split('T')[0]
  
  // 加载供应商列表
  await loadSupplierList()
})

</script>

<style scoped>
.supplier-reconciliation {
  padding: 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100vh;
  position: relative;
}

.supplier-reconciliation::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.3) 0%, transparent 50%),
    radial-gradient(circle at 40% 40%, rgba(120, 219, 255, 0.2) 0%, transparent 50%);
  pointer-events: none;
}

.page-header {
  margin-bottom: 24px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.7) 100%);
  padding: 24px;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  position: relative;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  text-align: center;
}

.page-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #667eea, #764ba2, #f093fb);
  border-radius: 16px 16px 0 0;
}

.page-header h1 {
  margin: 0 0 8px 0;
  font-size: 28px;
  color: #2c3e50;
  font-weight: 600;
}

.breadcrumb {
  color: #7f8c8d;
  font-size: 14px;
}

.search-action-section {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.7) 100%);
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  position: relative;
  overflow: hidden;
}

.search-action-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #667eea, #764ba2);
}

.search-form {
  display: flex;
  gap: 20px;
  align-items: flex-end;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.action-buttons {
  display: flex;
  gap: 16px;
  justify-content: flex-end;
}

.form-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-item label {
  font-weight: 600;
  color: #2c3e50;
  font-size: 14px;
}

.form-item input,
.form-item select {
  padding: 12px 16px;
  border: 2px solid rgba(233, 236, 239, 0.5);
  border-radius: 12px;
  font-size: 14px;
  min-width: 150px;
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.8);
  box-sizing: border-box;
}

.form-item input:focus,
.form-item select:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
  background: rgba(255, 255, 255, 0.95);
  transform: translateY(-2px);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.5s ease;
}

.btn:hover::before {
  left: 100%;
}

.btn-primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
}

.btn-secondary {
  background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
  color: white;
}

.btn-secondary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(108, 117, 125, 0.4);
}

.btn-icon {
  margin-right: 8px;
  font-size: 16px;
}

.reconciliation-content {
  margin-top: 30px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.7) 100%);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  position: relative;
  overflow: hidden;
}

.reconciliation-content::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #667eea, #764ba2);
}

.reconciliation-header {
  text-align: center;
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 2px solid #eee;
}

.reconciliation-header h2 {
  margin: 0 0 15px 0;
  color: #333;
  font-size: 20px;
}

.reconciliation-info p {
  margin: 5px 0;
  color: #666;
  font-size: 14px;
}

.summary-section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
}

.summary-item {
  text-align: center;
}

.summary-item .label {
  display: block;
  font-size: 14px;
  color: #666;
  margin-bottom: 8px;
}

.summary-item .value {
  display: block;
  font-size: 24px;
  font-weight: bold;
  color: #333;
}

.summary-item .value.negative {
  color: #dc3545;
}

.detail-section h3 {
  margin: 0 0 20px 0;
  color: #2c3e50;
  font-size: 20px;
  font-weight: 600;
}

.table-section {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.7) 100%);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  position: relative;
  overflow: hidden;
  margin-bottom: 24px;
}

.table-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #667eea, #764ba2);
}

.detail-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 12px;
  overflow: hidden;
}

.detail-table th,
.detail-table td {
  padding: 16px 12px;
  text-align: left;
  border-bottom: 1px solid rgba(233, 236, 239, 0.5);
}

.detail-table th {
  background: #f8f9fa;
  font-weight: 600;
  color: #495057;
  position: relative;
}

.detail-table th::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #667eea, #764ba2);
}

.detail-table tbody tr {
  transition: all 0.3s ease;
  border-bottom: 1px solid rgba(233, 236, 239, 0.3);
}

.detail-table tbody tr:hover {
  background: rgba(102, 126, 234, 0.1);
  transform: translateX(4px);
  box-shadow: 0 4px 16px rgba(102, 126, 234, 0.2);
}

.detail-table tbody tr.selected-row {
  background: linear-gradient(135deg, rgba(40, 167, 69, 0.08) 0%, rgba(32, 201, 151, 0.08) 100%);
  border-left: 4px solid #20c997;
  box-shadow: inset 0 0 0 1px rgba(32, 201, 151, 0.25);
}

.empty-state {
  text-align: center;
  padding: 80px 20px;
  color: #7f8c8d;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.7) 100%);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  position: relative;
  overflow: hidden;
}

.empty-state::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #667eea, #764ba2);
}

.empty-icon {
  font-size: 64px;
  margin-bottom: 24px;
  display: block;
}

.empty-state h3 {
  margin: 0 0 16px 0;
  color: #2c3e50;
  font-size: 24px;
  font-weight: 600;
}

.empty-state p {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
}

/* 弹窗样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  background: white;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  max-width: 600px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
}

.modal-header {
  padding: 20px 24px;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: 12px 12px 0 0;
}

.modal-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.modal-close {
  background: none;
  border: none;
  color: white;
  font-size: 24px;
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background-color 0.2s ease;
}

.modal-close:hover {
  background: rgba(255, 255, 255, 0.2);
}

.modal-body {
  padding: 24px;
}

.modal-body p {
  margin: 0 0 16px 0;
  color: #374151;
  font-size: 16px;
}

.modal-footer {
  padding: 20px 24px;
  border-top: 1px solid #e5e7eb;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  background: #f9fafb;
  border-radius: 0 0 12px 12px;
}

.column-selection {
  margin: 20px 0;
  padding: 16px;
  background: #f8fafc;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
}

.column-selection p {
  margin: 0 0 12px 0;
  font-weight: 600;
  color: #374151;
}

.column-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}

.column-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 8px 12px;
  background: white;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.column-checkbox:hover {
  background: #f3f4f6;
  border-color: #9ca3af;
}

.column-checkbox input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.column-checkbox span {
  font-size: 14px;
  color: #374151;
  font-weight: 500;
}

.export-info {
  margin-top: 20px;
  padding: 16px;
  background: #f0f9ff;
  border-radius: 8px;
  border: 1px solid #bae6fd;
}

.export-info p {
  margin: 0 0 12px 0;
  font-weight: 600;
  color: #1e40af;
}

.export-info ul {
  margin: 0;
  padding-left: 20px;
  color: #1e40af;
}

.export-info li {
  margin: 4px 0;
  color: #1e40af;
}

.export-modal .modal-content {
  max-width: 700px;
}

.export-modal .column-grid {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

/* 批量操作样式 */
.batch-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
  padding: 12px 16px;
  background: #f8fafc;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-weight: 500;
  color: #374151;
}

.checkbox-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.selected-count {
  color: #059669;
  font-weight: 500;
  font-size: 14px;
}

/* 表格选择列样式 */
.detail-table th:first-child,
.detail-table td:first-child {
  text-align: center;
  width: 50px;
}

/* 金额列样式 */
.amount-cell {
  font-weight: 500;
  text-align: right;
  font-family: 'Courier New', monospace;
}

.debit-cell {
  color: #dc3545;
}

.credit-cell {
  color: #28a745;
}

/* 余额列样式 */
.balance-cell {
  font-weight: 600;
  text-align: right;
  font-family: 'Courier New', monospace;
}

.balance-cell.negative {
  color: #dc3545;
}

.balance-cell:not(.negative) {
  color: #28a745;
}

.detail-table th:first-child input[type="checkbox"],
.detail-table td:first-child input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

</style>
